<template>
  <div>
    <el-row>
      <el-col>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-select class="el_input" v-model="yearS" placeholder="年份" clearable @change="changeYears">
              <el-option v-for="item in yearlist" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3" v-if="prizelist.length > 0">
            <el-select v-model="prizeS" placeholder="奖项" clearable @change="changePrize">
              <el-option v-for="item in prizelist" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="addressS" placeholder="街镇" clearable @change="changeAddress">
              <el-option v-for="item in addresslist" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-col>
          <!-- <el-col :span="2">
              <el-button class="button_ys" type="primary" round>导出</el-button>
            </el-col> -->
          <el-col :span="5" :offset="10" v-if="prizelist.length > 0">
            <el-input placeholder="关键词搜索" v-model="search" @change="getSearch">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="5" :offset="13" v-else>
            <el-input placeholder="关键词搜索" v-model="search" @change="getSearch">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="b_table">
        <el-table :header-cell-style="{ backgroundColor: '#f5f6f9' }" :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="专利名称" width="500" v-if="prizelist.length > 0">
          </el-table-column>
          <el-table-column prop="name" label="企业名称" width="500" v-else>
          </el-table-column>
          <el-table-column prop="years" label="年份" width="100">
          </el-table-column>
          <el-table-column prop="ano" label="专利号" width="220" v-if="prizelist.length > 0">
          </el-table-column>
          <el-table-column prop="company" label="所属单位" v-if="prizelist.length > 0">
          </el-table-column>
          <el-table-column prop="address" label="所属街道" v-else>
          </el-table-column>
          <el-table-column fixed="right" :label="prizelist.length <= 0 ? '操作' : ''" width="150">
            <template slot-scope="scope">
              <el-button v-if="prizelist.length <= 0" class="add_button" @click="handleClick(scope.row)" size="mini"
                round>添加到待走访</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pagination">
      <el-pagination background :current-page="page" :page-size="page_size" layout="total, prev, pager, next, jumper"
        :total="parseInt(count)" align="left" @current-change="advantageCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    tableData: {
      type: Array
    },
    yearlist: {
      type: Array
    },
    addresslist: {
      type: Array
    },
    prizelist: {
      type: Array,
      default: function () {
        return []
      }
    },
    count: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    page_size: {
      type: Number,
      default: 10
    },
  },
  data() {
    return {
      yearS: '',
      prizeS: '',
      addressS: '',
      search: '',
    };
  },
  mounted() {
  },
  methods: {
    getSearch() {
      this.$emit('getSearch', this.search)
    },
    handleClick(row) {
      // console.log(row);
      this.$router.push(
        {
          path: '/addWaitvisit',
          query: {
            company_name: row.name,
          }
        }
      )
    },
    advantageCurrentChange(page) {
      this.$emit('currentChange', page);
    },
    changeYears(year) {
      this.$emit('changeYears', year);
    },
    changePrize(prize) {
      this.$emit('changePrize', prize);
    },
    changeAddress(address) {
      this.$emit('changeAddress', address);
    }
  },
};
</script>

<style scoped lang="less">
.pagination {
  width: 90%;
  margin: 25px auto;
}

::v-deep tr th:nth-child(2),
::v-deep tr th:nth-child(3),
::v-deep tr th:nth-child(5),
::v-deep tr td:nth-child(2),
::v-deep tr td:nth-child(3),
::v-deep tr td:nth-child(5) {
  text-align: center;
}

::v-deep tr th {
  font-size: 16px;
  color: #334681;
  font-weight: initial;
}

::v-deep tr td {
  font-size: 16px;
  color: #334681;
}

.button_ys {
  background-color: #387DFF;
  height: 38px;
  line-height: 5px;
  padding: 10px 47px 12px 45px;
  font-size: 16px;
}

.add_button {
  color: #3E7EF5;
  background-color: #ecf3ff;
  border: none;
  font-size: 16px;
}

.mr {
  margin-bottom: 20px;
}

.mr:hover {
  background: #f4f5f7;
  cursor: pointer;
}

.el-main {
  margin: 25px 30px 0 30px;
  border-radius: 5px;
}

::v-deep input {
  border-radius: 30px;
}


::v-deep .el-table_1_column_5 {
  text-align: center;
}

.b_table {
  margin-top: 15px;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
